<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <!--
        做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。

        产生问题的原因：
        背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载的，浏览器会在资源被使用时再去加载。
        我们这个练习，一上来就会加载link.png由于hover和active的状态没有马上触发，所有hover.png和active.png并不是立即加载的。
        当hover被触发时，浏览器去加载hover.png,当active被触发时，浏览器去加载active.png,由于加载图片需要一定的时间，所以在加载和显示过程中有一段时间，背景
        图片无法显示，导致出现闪烁的情况

        解决办法：将3张图片让ui整合成一张图片,这样可以同时将三个按钮同时加载，就不会出现闪烁的问题了，然后通过background-position来切换要显示的图片的位置，这种技术叫做（CSS-Sprite）--雪碧图
        优点：
            将多个图片整合为一张图片，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高用户体验。
            将多个图片整合为一张图片，减少了图片总大小，提高请求的速度，增加了用户体验。


            ps：演示例子中图片切的不好
    -->
    <style type="text/css">
        .btn{
            display: block;
            width: 109px;
            height: 33px;
            background-image: url("../img/4.png");
        }
        .btn:link {
            /*background-image: url("../img/1.png");*/
        }
        .btn:hover {
            /*background-image: url("../img/2.png");*/
            background-position: -109px 0;
        }
        .btn:active {
            /*background-image: url("../img/3.png");*/
            background-position: -218px 0;
        }
    </style>
</head>
<body>
<a class="btn" href="#"></a>
</body>
</html>